<script setup lang="ts">
import { ref } from "vue";
var form:any = ref({ adminname: '', region: '' })

var tableData:any = ref([]);
var handleSelectionChange = () => {

}
const rules = {
  adminname: [
    { required: true, message: '请输入文章标题', trigger: 'change' }
  ],
  password: [
    { region: true, message: '请选择', trigger: 'change' }
  ],

}

</script>
<template>
  <div class="operation_second">
    <div class="header">
      <div class="color" style="background-color: #5e80ea;height: 30px; width: 8px;"></div>
      <h2>公共资源管理</h2>
      <div class="btns1">
        <el-button type="success"
          style="font-size: 12px;background-color: #1e9fff;width: 80px; font-weight: 700;">新增</el-button>

        <el-button plain
          style="font-size: 12px;background-color: #ffb800; color: white; font-weight: 700; width: 80px;">批量删除</el-button>
      </div>
    </div>
    <div class="body">
      <div class="top">
        <div class="title">
          <el-form class="form" :model="form" :rules="rules" ref="formref">
            <el-form-item label=" 文章标题:">
              <el-input v-model="form.adminname" placeholder="请输入文章标题" />
            </el-form-item>
          </el-form>
        </div>
        <div class="type">
          <el-form-item label="文章类型">
            <el-select v-model="form.region" placeholder="请选择">
              <el-option label="图文" value="图文" />
              <el-option label="视频" value="视频" />
              <el-option label="音频" value="音频" />
            </el-select>
          </el-form-item>
        </div>
        <div class="btns">
          <el-button type="success"
            style="font-size: 12px;background-color: #009688;width: 80px; font-weight: 700;">查询</el-button>

          <el-button plain style="font-size: 12px; font-weight: 700; width: 80px;">重置</el-button>
        </div>
      </div>
      <div class="bottom">
        <el-table  :data="tableData" stripe  style="width: 100%;" @selection-change="handleSelectionChange">
          <el-table-column type="selection" />
          <el-table-column label="文章标题" ></el-table-column>
          <el-table-column property="" label="发布渠道"></el-table-column>
          <el-table-column property="" label="发布频道"></el-table-column>
          <el-table-column property="" label="文章类型"></el-table-column>
          <el-table-column property="" label="关键词"></el-table-column>
          <el-table-column property="" label="发布人"></el-table-column>
          <el-table-column property="" label="发送时间"></el-table-column>
          <el-table-column property="" label="操作"></el-table-column>
        </el-table>
      </div>
    </div>


  </div>
</template>
<style scoped>
/* 最外层盒子 */
.operation_second {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: #f0f2f5;
  display: flex;
  flex-direction: column;
}

/* 头部区域 */
.header {
  background-color: white;
  position: absolute;
  top: 20px;
  display: flex;
  margin: 0 auto;
  position: relative;
  line-height: 50px;
  height: 50px;
  width: 96%;
  margin-bottom: 30px;
}

.operation_second .header {
  display: flex;
  position: relative;
}

.operation_second .header .color {
  margin-top: 10px;
  margin-left: 30px;
  margin-right: 20px;
}

.operation_second .header .btns1 {
  position: absolute;
  right: 20px;
}

/* 身体区域 */
.operation_second .body {
  flex: 1;
  width: 96%;
  margin: 0 auto;
  background-color: white;
}

.top {
  background-color: white;
  display: flex;
  margin: 0 auto;

  position: relative;
  line-height: 50px;
  height: 50px;
  width: 98%;
  border: 1px solid black;
  border-radius: 10px;
  margin-top: 10px;
}

.top .title {
  margin-top: 10px;
  margin-left: 20px;
}

.top .type {
  margin-top: 10px;
  margin-left: 20px;
}

.top .btns {
  position: absolute;
  right: 20px;

}
</style>
